package cn.xxstudy.compose.material

import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.xxstudy.compose.R
import kotlinx.coroutines.launch

/**
 * @author ：wuxinxi on 2021/3/5 .
 * @packages ：cn.xxstudy.compose.material .
 * TODO:一句话描述
 */
class SimpleBottomSheetScaffoldActivity : AppCompatActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface {
                BottomSheetComponent()
            }
        }
    }
}

@Preview
@Composable
@ExperimentalMaterialApi
fun BottomSheetComponent() {
    val colors = arrayOf(
        Color.Red,
        Color.Black,
        Color.Blue,
        Color.Cyan,
        Color.DarkGray,
        Color.Magenta,
        Color.Yellow,
        Color.Green
    )
    val scope = rememberCoroutineScope()
    val scaffoldState = rememberBottomSheetScaffoldState()
    BottomSheetScaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Bottom sheet scaffold") },
                navigationIcon = {
                    IconButton(onClick = { scope.launch { scaffoldState.drawerState.open() } }) {
                        Icon(Icons.Default.Menu, contentDescription = Icons.Default.Menu.name)
                    }
                }
            )
        },
        sheetContent = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(128.dp)
                    .align(Alignment.CenterHorizontally)
            ) {
                Text("Swipe up to expand sheet")
            }

            Column(
                modifier = Modifier.padding(64.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Sheet content")
                Spacer(modifier = Modifier.height(20.dp))
                Button(onClick = { scope.launch { scaffoldState.bottomSheetState.collapse() } }) {
                    Text(text = "关闭Sheet")
                }
            }
        },
        scaffoldState = scaffoldState,
        floatingActionButton = {
            var clickCount by remember { mutableStateOf(0) }
            FloatingActionButton(onClick = {
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar(
                        "Snackbar #${++clickCount}"
                    )
                }
            }) {
                Icon(Icons.Default.Favorite, contentDescription = Icons.Default.Favorite.name)
            }
        },
        floatingActionButtonPosition = FabPosition.End,
        //sheet默认展示出的高度
        sheetPeekHeight = 128.dp,
        drawerContent = {
            LazyColumn(
                contentPadding = PaddingValues(4.dp),
                horizontalAlignment = Alignment.Start
            ) {
                item {
                    Button(modifier = Modifier
                        .fillMaxWidth(),
                        onClick = { scope.launch { scaffoldState.drawerState.close() } }) {
                        Icon(
                            Icons.Filled.Close,
                            contentDescription = Icons.Filled.Close.name,
                            modifier = Modifier.size(ButtonDefaults.IconSize)
                        )
                        Spacer(Modifier.size(ButtonDefaults.IconSpacing))
                        Text("关闭")
                    }
                }
                item {
                    ListItem(
                        icon = { Icon(Icons.Default.Person, "") },
                        text = { Text(text = "个人中心") },
                        trailing = {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_baseline_chevron_right_24),
                                contentDescription = null
                            )
                        },
                        modifier = Modifier.clickable {
                            scope.launch {
                                scaffoldState.snackbarHostState.showSnackbar("个人中心")
                            }
                        }
                    )
                }
                item {
                    ListItem(
                        icon = { Icon(Icons.Default.Settings, "") },
                        text = { Text(text = "设置") },
                        trailing = {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_baseline_chevron_right_24),
                                contentDescription = null
                            )
                        },
                        modifier = Modifier.clickable {
                            scope.launch {
                                scaffoldState.snackbarHostState.showSnackbar("设置")
                            }
                        }
                    )
                }
                item {
                    ListItem(
                        icon = { Icon(Icons.Default.Search, "") },
                        text = { Text(text = "搜一搜") },
                        trailing = {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_baseline_chevron_right_24),
                                contentDescription = null
                            )
                        },
                        modifier = Modifier.clickable {
                            scope.launch {
                                scaffoldState.snackbarHostState.showSnackbar("搜一搜")
                            }
                        }
                    )
                }
                item {
                    ListItem(
                        icon = { Icon(Icons.Default.Email, "") },
                        text = { Text(text = "邮件") },
                        trailing = {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_baseline_chevron_right_24),
                                contentDescription = null
                            )
                        },
                        modifier = Modifier.clickable (onClick = {
                            scope.launch {
                                scaffoldState.snackbarHostState.showSnackbar("邮件")
                            }
                        })
                    )
                }
            }
        },
        content = {
            LazyColumn(contentPadding = it) {
                items(100) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(colors[it % colors.size])
                    )
                }
            }
        }
    )
}

@Composable
fun DrawableItem(text: String, leftImageVector: ImageVector) {
    Row(
        modifier = Modifier
            .height(50.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Icon(leftImageVector, contentDescription = leftImageVector.name)
        Spacer(modifier = Modifier.padding(horizontal = 5.dp))
        Text(text, style = TextStyle(fontSize = 16.sp))
        Spacer(modifier = Modifier.weight(1f, true))
        Icon(
            painterResource(id = R.drawable.ic_baseline_chevron_right_24),
            contentDescription = "info"
        )
    }
}